<template>
  <div class="dormitoryManage">
    <div class="top">
      <Form
        ref="formRef"
        name="advanced_search"
        class="ant-advanced-search-form"
        :model="formState"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <Row :gutter="[16, 1]">
          <Col :span="10">
            <Form.Item name="name" label="宿舍楼名称">
              <a-input
                v-model:value="formState.dormitoryName"
                allow-clear
                placeholder="请输入"
                :maxlength="30"
                autocomplete="off"
                v-on:input="onSubmit"
              ></a-input>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="below">
      <div class="search">
        <div class="search-btn-left">
          <a-button type="primary" style="margin-right: 16px" @click="dormitoryAdd"
            >添加宿舍楼</a-button
          >
          <a-button style="margin-right: 16px" :disabled="!isDel" @click="onDelDormitory()"
            >删除宿舍楼</a-button
          >
        </div>
      </div>
      <!-- 表格 -->
      <div>
        <div style="margin-bottom: 16px">
          <span style="margin-left: 8px">
            <template>
              {{ `Selected ${selectedRowKeys.length} items` }}
            </template>
          </span>
        </div>
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columnsDormitory"
          :data-source="tableData.records"
          :row-key="record => record.id"
          :pagination="false"
          :loading="loading"
          :scroll="{ x: 1300 }"
        >
          <!-- <template v-slot:emptyText>{{ loading ? '' : '暂无数据' }}</template> -->
          <template v-slot:emptyText>
            <div class="zz-global-nodata">
              <img
                v-if="!formState.dormitoryName"
                src="@/assets/images/accommodation/default-no-data.png"
                alt=""
              />
              <img v-else src="@/assets/images/accommodation/no-data-search-new.png" alt="" />
            </div>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'genderAttribute'">
              <span v-if="record.dormitoryType === 0">{{
                record.genderAttribute === 1
                  ? '男生宿舍'
                  : record.genderAttribute === 0
                  ? '女生宿舍'
                  : '混合宿舍'
              }}</span>
              <span v-if="record.dormitoryType === 1">{{
                record.genderAttribute === 1
                  ? '男教职工宿舍'
                  : record.genderAttribute === 0
                  ? '女教职工宿舍'
                  : '混合教职工宿舍'
              }}</span>
            </template>
            <template v-if="column.dataIndex === 'hostelName'">
              <div>
                <Tooltip
                  :overlay-style="{ whiteSpace: 'normal' }"
                  :get-popup-container="
                    triggerNode => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  placement="topLeft"
                  :title="record.hostelName"
                >
                  <p
                    style="
                      font-size: 14px;
                      color: #222222;
                      width: 120px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    <span v-if="record.hostelName && record.hostelName !== null">{{
                      record.hostelName
                    }}</span>
                    <span v-else>--</span>
                  </p>
                </Tooltip>
              </div>
            </template>
            <template v-if="column.dataIndex === 'action'">
              <a-button
                type="primary"
                size="small"
                ghost
                style="border: 1px solid #56d6b7; color: #56d6b7; margin-right: 10px"
                class="z-btn-24"
                @click="onEditDeta(record)"
                >编辑</a-button
              >
              <a-button
                type="primary"
                size="small"
                ghost
                class="z-btn-24"
                @click="onDormitoryDetails(record)"
                >查看</a-button
              >
            </template>
          </template>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <span style="color: #999999; margin-right: 8px">共{{ tableData.pages }}页</span>
        <a-pagination
          v-model:current="tableData.current"
          v-model:pageSize="tableData.size"
          :page-size-options="pageSizeOptions"
          show-quick-jumper
          :total="tableData.total"
          :show-size-changer="true"
          @change="onChangePagination"
        />
      </div>
    </div>

    <!-- 添加宿舍 弹窗 -->
    <my-dialog
      :dialog-state="addDormitory.visible"
      :dialog-title="addDormitory.title"
      :dialog-width="addDormitory.width"
      :icon-type="addDormitory.iconType"
      :show-cancel="true"
      :btn-loading="btnLoading"
      @handleCancel="onCancelDormitory"
      @handleOk="onCreateDormitory"
    >
      <template v-slot:location>
        <ul class="add-room-dialog">
          <!-- 宿舍楼 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">宿舍楼：</span>
            </div>
            <a-input
              v-model:value="formDormitoryState.name"
              autocomplete="off"
              readonly
              placeholder="请选择"
              @click="onChangeDormitory"
            ></a-input>
            <!--            <a-select-->
            <!--              ref="select"-->
            <!--              v-model:value="formDormitoryState.dormitoryId"-->
            <!--              placeholder="请选择"-->
            <!--              @change="onChangeDormitory"-->
            <!--            >-->
            <!--              <a-select-option-->
            <!--                v-for="(item, index) of dormitoryList"-->
            <!--                :key="index"-->
            <!--                :value="item.id"-->
            <!--                >{{ item.name }}</a-select-option-->
            <!--              >-->
            <!--            </a-select>-->
          </li>
          <p style="padding: 5px 0px 5px 38px; font-size: 13px; color: red"
            >注：首次添加宿舍楼层级决定以后添加宿舍楼层级，请在添加之前谨慎规划地点建设</p
          >
          <!-- 楼层数 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">楼层数：</span>
            </div>
            <a-input-number
              id="inputNumber"
              v-model:value="formDormitoryState.totalStorey"
              autocomplete="off"
              :parser="value => (/^\d+$/.test(value) ? value : 1)"
              :min="1"
              :max="30"
              style="width: 82%"
              placeholder="请输入"
            />
          </li>
          <!-- 宿舍楼属性 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">宿舍楼属性：</span>
            </div>
            <a-select
              v-if="formDormitoryState.dormitoryType === 0"
              ref="select"
              v-model:value="formDormitoryState.genderAttribute"
              placeholder="请选择"
            >
              <a-select-option v-if="floorTypeShowStatusStudent.male" :value="1"
                >男生宿舍</a-select-option
              >
              <a-select-option v-if="floorTypeShowStatusStudent.female" :value="0"
                >女生宿舍</a-select-option
              >
              <a-select-option v-if="floorTypeShowStatusStudent.blend" :value="2"
                >混合宿舍</a-select-option
              >
            </a-select>
            <a-select
              v-else
              ref="select"
              v-model:value="formDormitoryState.genderAttribute"
              placeholder="请选择"
            >
              <a-select-option v-if="floorTypeShowStatus.male" :value="1"
                >男教职工宿舍</a-select-option
              >
              <a-select-option v-if="floorTypeShowStatus.female" :value="0"
                >女教职工宿舍</a-select-option
              >
              <a-select-option v-if="floorTypeShowStatus.blend" :value="2"
                >混合教职工宿舍</a-select-option
              >
            </a-select>
          </li>
          <!-- 宿管人员 -->
          <li v-if="formDormitoryState.dormitoryType === 0">
            <div class="add-room-dialog-label">
              <span class="required-tips">宿管人员：</span>
            </div>

            <a-input
              v-model:value="formDormitoryState.hostelName"
              autocomplete="off"
              readonly="readonly"
              placeholder="请选择"
              @click="onFramework"
            ></a-input>
          </li>
          <!-- 宿管手机号 -->
          <li v-if="formDormitoryState.dormitoryType === 0">
            <div class="add-room-dialog-label">
              <span class="required-tips">宿管手机号：</span>
            </div>
            <div style="width: 81%">
              <Tooltip
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                :title="formDormitoryState.hostelPhone ? formDormitoryState.hostelPhone : ''"
              >
                <span>
                  <a-input
                    v-model:value="formDormitoryState.hostelPhone"
                    autocomplete="off"
                    disabled
                  ></a-input>
                </span>
              </Tooltip>
            </div>
          </li>
          <!-- 备注 -->
          <li>
            <div class="add-room-dialog-label">
              <span>备注：</span>
            </div>
            <div class="remarks" style="width: 81%">
              <a-textarea
                v-model:value="formDormitoryState.remark"
                placeholder="请输入"
                :rows="6"
                :maxlength="140"
                style="resize: none"
                @change="onChangMark"
              />
              <div class="font-data"> {{ markLength }} /140</div>
            </div>
          </li>
        </ul>
      </template>
    </my-dialog>
    <!-- 查看宿舍楼弹窗 -->
    <my-dialog
      :dialog-state="dormitoryInfo.visible"
      :dialog-title="dormitoryInfo.title"
      :dialog-width="dormitoryInfo.width"
      :icon-type="dormitoryInfo.iconType"
      :show-cancel="false"
      @handleCancel="onCancel"
      @handleOk="onCancel"
    >
      <template v-slot:location>
        <ul class="add-room-dialog">
          <!-- 宿舍楼 -->
          <li>
            <div class="add-room-dialog-label">
              <span class="required-tips">宿舍楼：</span>
            </div>
            <div style="width: 81%">
              <Tooltip
                :title="formDormitoryState.name ? formDormitoryState.name : ''"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode || document.body;
                  }
                "
              >
                <span>
                  <a-input
                    v-model:value="formDormitoryState.name"
                    autocomplete="off"
                    disabled="disabled"
                    readonly
                    placeholder="请选择"
                    @click="onChangeDormitory"
                  ></a-input>
                </span>
              </Tooltip>
            </div>
          </li>
          <!-- 楼层数 -->
          <li>
            <div class="add-room-dialog-label">
              <span>楼层数：</span>
            </div>
            <a-input-number
              id="inputNumber"
              v-model:value="formDormitoryState.totalStorey"
              autocomplete="off"
              disabled
              :min="1"
              :max="30"
              style="width: 82%"
              placeholder="请输入"
            />
          </li>
          <!-- 宿舍楼属性 -->
          <li>
            <div class="add-room-dialog-label">
              <span>宿舍楼属性：</span>
            </div>
            <a-select
              v-if="formDormitoryState.dormitoryType === 0"
              ref="select"
              v-model:value="formDormitoryState.genderAttribute"
              disabled
              placeholder="请选择"
            >
              <a-select-option :value="1">男生宿舍</a-select-option>
              <a-select-option :value="0">女生宿舍</a-select-option>
              <a-select-option :value="2">混合宿舍</a-select-option>
            </a-select>
            <a-select
              v-else
              ref="select"
              v-model:value="formDormitoryState.genderAttribute"
              disabled
              placeholder="请选择"
            >
              <a-select-option :value="1">男教职工宿舍</a-select-option>
              <a-select-option :value="0">女教职工宿舍</a-select-option>
              <a-select-option :value="2">混合教职工宿舍</a-select-option>
            </a-select>
          </li>
          <!-- 宿管人员 -->
          <li v-if="formDormitoryState.dormitoryType === 0">
            <div class="add-room-dialog-label">
              <span>宿管人员：</span>
            </div>
            <div style="width: 81%">
              <Tooltip
                :title="formDormitoryState.hostelName ? formDormitoryState.hostelName : ''"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode || document.body;
                  }
                "
              >
                <span>
                  <a-input
                    v-model:value="formDormitoryState.hostelName"
                    autocomplete="off"
                    disabled
                    readonly="readonly"
                    placeholder="请选择"
                    @click="onFramework"
                  ></a-input>
                </span>
              </Tooltip>
            </div>
          </li>
          <li v-if="formDormitoryState.dormitoryType === 0">
            <div class="add-room-dialog-label">
              <span class="required-tips">宿管手机号：</span>
            </div>
            <div style="width: 81%">
              <Tooltip
                :title="formDormitoryState.hostelPhone ? formDormitoryState.hostelPhone : ''"
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode || document.body;
                  }
                "
              >
                <span>
                  <a-input
                    v-model:value="formDormitoryState.hostelPhone"
                    autocomplete="off"
                    disabled
                  ></a-input>
                </span>
              </Tooltip>
            </div>
          </li>
          <!-- 备注 -->
          <li>
            <div class="add-room-dialog-label">
              <span>备注：</span>
            </div>
            <div class="remarks" style="width: 81%">
              <a-textarea
                v-model:value="formDormitoryState.remark"
                disabled
                placeholder="请输入"
                :rows="6"
                :max-length="140"
                style="resize: none"
                @change="onChangMark"
              />
              <div class="font-data"> {{ markLength }} /140</div>
            </div>
          </li>
        </ul>
      </template>
      <template>
        <a-button key="submit" type="primary" @click="onCancel">确定</a-button>
      </template>
    </my-dialog>

    <!-- 删除宿舍楼 提示框 -->
    <my-dialog
      :dialog-state="delDormitory.visible"
      :dialog-title="delDormitory.title"
      :dialog-width="delDormitory.width"
      :icon-type="delDormitory.iconType"
      :btn-loading="btnLoading"
      @handleCancel="handleCancelDel"
      @handleOk="onDelete"
    >
      <template v-slot:location>
        <div class="checkOutStyle">
          <img src="@/assets/images/accommodation/drawable-xxxhdpi_popu_icon_warn.png" alt="" />
          <!-- <span></span> -->
          <span> {{ delText }}</span>
        </div>
        <!-- <p class="checkOut-notes">注：此动作将会清除已选内容所有住宿信息，请谨慎操作。</p> -->
      </template>
    </my-dialog>
    <!-- 选择添加学生宿舍楼还是教师宿舍楼 提示框 新加的-->
    <my-dialog
      :dialog-state="selectFloorType.visible"
      :dialog-title="selectFloorType.title"
      :dialog-width="selectFloorType.width"
      :icon-type="selectFloorType.iconType"
      :footer="null"
      :body-style="selectFloorType.bodyStyle"
      :wrap-class-name="selectFloorType.wrapClassName"
      @handleCancel="selectFloorType.visible = false"
    >
      <!-- <template v-slot:location>
        <div class="checkOutStyle checkOutStyleBottom" @click="addStudentFloor">
          <span>学生宿舍楼</span>
        </div>
        <div class="checkOutStyle" @click="addTeacherFloor">
          <span>教职工宿舍楼</span>
        </div>
      </template> -->
      <template v-slot:location>
        <div
          class="checkOutStyle checkOutStyleBottom checkOutStyleNew checkOutStyleNewStudent"
          @click="addFloor(0)"
        >
          <div class="checkOutStyleNewChild">
            <img
              class="studentFloorLeftIcon"
              src="@/assets/images/accommodation/xuesheng.png"
              alt=""
            />
            <span class="studentFloorLeftText">学生宿舍楼模板</span>
          </div>

          <img class="more-new" src="@/assets/images/accommodation/more.png" alt="" />
        </div>
        <div class="checkOutStyle checkOutStyleNew checkOutStyleNewTeacher" @click="addFloor(1)">
          <div class="checkOutStyleNewChild">
            <img
              class="studentFloorLeftIcon"
              src="@/assets/images/accommodation/jiaozhigong.png"
              alt=""
            />
            <span class="studentFloorLeftText">教职工宿舍楼模板</span>
          </div>

          <img class="more-new" src="@/assets/images/accommodation/more_1.png" alt="" />
        </div>
      </template>
    </my-dialog>
    <!-- 选择人员lorem -->
    <frameworkModal
      ref="frameworkModalDiv"
      :modal-state="modalState"
      :dept-structure="deptStructure"
      :user-amount="userAmount"
      :dept-name="deptName"
      :select-user-list="selectUserList"
      :is-user-all="isUserAll"
      :dept-structure-copy="deptStructureCopy"
      @deplist="deptUserList"
      @handle-ok="addDor"
      @handleCancel="modalState = false"
      @deptBreadcrumb="deptBreadcrumb"
      @deptListAll="deptListAll"
    />

    <!-- 选择宿舍楼弹窗 -->
    <my-dialog
      v-if="showDormitory"
      :dialog-state="bedchoiceForm.visible"
      :dialog-title="bedchoiceForm.title"
      :dialog-width="bedchoiceForm.width"
      :icon-type="bedchoiceForm.iconType"
      destroy-on-close="true"
      :btn-loading="btnLoading"
      @handleCancel="onCancelDormitoryRoom"
      @handleOk="onSubmitDormitoryRoom"
    >
      <template v-slot:location>
        <div class="campus">地点选择</div>
        <div class="content">
          <div class="option" style="padding: 16px; width: 310px; height: 400px; overflow: auto">
            <!--            <Col>-->
            <!--              <a-input-->
            <!--                v-model:value="formState.search"-->
            <!--                placeholder="请输入您的搜索内容"-->
            <!--                @keyup.enter="onSearch(formState.search)"-->
            <!--              >-->
            <!--                <template #prefix-->
            <!--                  ><img src="@/assets/images/accommodation/jiaoxue_icon_sousuo.png" alt=""-->
            <!--                /></template>-->
            <!--              </a-input>-->
            <!--            </Col>-->
            <a-radio-group v-model:value="selectDormitoryRoomValue[0]">
              <Menu
                v-model:openKeys="openDormitoryRoomValue"
                v-model:selectedKeys="selectDormitoryRoomValue"
                style="width: 256px"
                mode="inline"
              >
                <Menu.SubMenu v-for="(item, index) of dormitoryList" :key="index">
                  <template #expandIcon>
                    <down-outlined v-if="item.children" style="font-size: 12px" />
                  </template>
                  <template #title><a-radio :value="item" />{{ item.name }}</template>
                  <Room
                    v-for="(item, index) of item.children"
                    :key="index"
                    :item="item"
                    :index="index"
                    @onRoom="onRoom"
                  />
                </Menu.SubMenu>
              </Menu>
            </a-radio-group>
          </div>
        </div>
      </template>
    </my-dialog>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, watch, nextTick } from 'vue';
import { Form, Row, Col, message, Tooltip, Menu } from 'ant-design-vue';
import { DownOutlined } from '@ant-design/icons-vue';
import frameworkModal from '@/components/frameworkModal/index.vue';
import MyDialog from '@/components/dialog/index.vue';
import {
  getDormitoryPageList,
  createDormitory,
  updateDormitory,
  deleteDormitory,
  getDormitoryInfo,
  listPlaceDormitory,
  listPlaceDormitoryTree,
  getAllDeptInfo
} from '@/api/dormitoryManage';
import Room from './room';
import { debounce } from '@/utils/debounce.js';
onMounted(() => {
  getDormitoryPage();
  getDormitory();
});
// 分页回调
const onChangePagination = checked => {
  getDormitoryPage();
};
/** ************************* 测试开始 ****************************************** */
const deptStructure = ref({}); // 部门结构数据
const userAmount = ref(0);
const isUserAll = ref([]);
const selectUserList = ref([]);

// 获取部门所有人员
const getDeptNumTotal = data => {
  console.log(data, '获取部门所有人员');
  isUserAll.value = [];
  isUserAll.value = [...isUserAll.value, ...data.deptPersonChildren];
  getisUserAll(data.children);
  console.log(isUserAll.value);
};
// 获取该部门下所有成员
const getisUserAll = data => {
  data.forEach(elem => {
    isUserAll.value = [...isUserAll.value, ...elem.deptPersonChildren];
    if (elem.children.length) {
      getisUserAll(elem.children);
    }
  });
};
// 教职工宿舍类型  显示状态
const teacherFloorType = reactive({
  male: true, // 男教职工宿舍楼
  female: true, // 女教职工宿舍楼
  blend: true // 混合职工宿舍楼
});
// 计算部门总人数
const deptNumTotal = data => {
  console.log(data, '计算部门总人数');
  userAmount.value = 0;
  userAmount.value += data.deptPersonChildren.length;
  getDeptUserListAll(data.children);
};
// 获取该部门下所有成员
const getDeptUserListAll = data => {
  data.forEach(elem => {
    userAmount.value += elem.deptPersonChildren.length;
    if (elem.children.length) {
      getDeptUserListAll(elem.children);
    }
  });
};
/** ************************* 测试结束 ***************************************** */

const deptStructureCopy = ref({}); // 部门结构数据备份
const deptName = ref([]); // 部门面包屑标题
const modalState = ref(false);
const frameworkModalDiv = ref(null);
const onFramework = async () => {
  console.log(formDormitoryState.value.hostelName);
  await getAllDeptInfo().then(res => {
    console.log('宿管人员', res);

    if (res.data.code === 200) {
      deptStructure.value = {
        children: res.data.data,
        deptPersonChildren: []
      };

      console.log(deptStructure.value);
      deptNumTotal(deptStructure.value);
      getDeptNumTotal(deptStructure.value);
      console.log(formDormitoryState.value.hostelName, 'formDormitoryState.value.hostelName');
      console.log(selectUserList.value, 'selectUserList.value');
      // if (formDormitoryState.value.hostelName) {
      console.log(frameworkModalDiv);
      console.log(selectUserList.value);
      if (addDormitory.title === '添加宿舍楼') {
        frameworkModalDiv.value.selectTotal = JSON.parse(JSON.stringify(selectUserList.value));
      } else {
        console.log('lorem====111111111');
        console.log('lorem====111111111', isUserAll.value);
        let arr = JSON.parse(JSON.stringify(selectUserList.value)).map(v => v.userId);
        console.log('ojbk', arr);
        let list = [];
        isUserAll.value.forEach(v => {
          if (arr.indexOf(v.userId) !== -1) list.push(v);
        });
        console.log('hahahhahah', list);
        frameworkModalDiv.value.selectTotal = deduplication(list);
      }
      console.log('lorem====', frameworkModalDiv.value.selectTotal);
      // }
      deptStructureCopy.value = JSON.parse(JSON.stringify(deptStructure.value));
      // deptStructure.value = res.data.data;
    }
  });
  console.log('0000000000', selectUserList.value);

  modalState.value = true;
};

// 保留数组中非重复数据
const deduplication = arr => {
  // let idList = [...new Set(arr.map(x => x.id))];
  // let arrList = [];
  // idList.forEach(elem => {
  //   arrList.push(arr.find(x => x.id === elem));
  // });
  // return arrList;
  let idList = [...new Set(arr.map(x => x.userId))];
  let arrList = [];
  idList.forEach(elem => {
    arrList.push(arr.find(x => x.userId === elem));
  });
  return arrList;
};

let selectDormitoryRoom = ref([]);
function onRoom(room, e) {
  if (e.target.checked) {
    selectDormitoryRoom.value = room;
  }
}

/** *宿舍楼弹窗**/

// 床位/宿舍调换选择学生弹窗
const bedchoiceForm = reactive({
  title: '',
  visible: false,
  width: '359px',
  iconType: 'default'
});

// 选择宿舍菜单
const openDormitoryRoomValue = ref([]);
const selectDormitoryRoomValue = ref([]);
// 宿舍选择回调
const onClickDormitory = (item, index) => {
  // 获取下级房间
  getDormitoryRoom(item, index);
};

const onSubmitDormitoryRoom = debounce(() => {
  btnLoading.value = true;
  if (
    selectDormitoryRoomValue.value[0] === '' ||
    selectDormitoryRoomValue.value[0] === null ||
    selectDormitoryRoomValue.value[0] === undefined
  ) {
    message.error('请选择宿舍楼');
    btnLoading.value = false;
    return false;
  } else {
    // 0 是新建的学生宿舍楼  1是新建的教师宿舍楼

    addDormitory.visible = true;

    showDormitory.value = true;
    if (selectDormitoryRoom.value.id === selectDormitoryRoomValue.value[0]) {
      console.log('sss1', selectDormitoryRoom.value);
      console.log('sss2', selectDormitoryRoom.value.fullPath);
      formDormitoryState.value.parentId = selectDormitoryRoom.value.parentId;
      formDormitoryState.value.locationId = selectDormitoryRoom.value.id;
      formDormitoryState.value.name = selectDormitoryRoom.value.name;
      formDormitoryState.value.fullPath = selectDormitoryRoom.value.other.fullPath;
    } else {
      formDormitoryState.value.parentId = selectDormitoryRoomValue.value[0].parentId;
      formDormitoryState.value.locationId = selectDormitoryRoomValue.value[0].id;
      formDormitoryState.value.name = selectDormitoryRoomValue.value[0].name;
      formDormitoryState.value.fullPath = selectDormitoryRoomValue.value[0].other.fullPath;
    }
    btnLoading.value = false;
    bedchoiceForm.visible = false;
  }
}, 500);
const showDormitory = ref(true);

// 取消
const onCancelDormitoryRoom = () => {
  bedchoiceForm.visible = false;
  showDormitory.value = false;
  showDormitory.value = true;
  addDormitory.visible = true;
  btnLoading.value = false;
};

/** *宿舍楼弹窗-结束**/

function deptUserList(data) {
  console.log('走到---', data);
  // deptUserList1.value = data;
  /** ************************* 测试开始 ****************************************** */
  deptStructure.value = data;
  deptName.value.push(data);
  deptNumTotal(data);
  /** ************************* 测试结束 ***************************************** */
}
// 顶级面包屑
const deptListAll = data => {
  deptStructure.value = data;
  deptNumTotal(data);
};
// 删除面包屑
const deptBreadcrumb = index => {
  deptName.value.splice(index);
};

// 宿舍楼列表
const dormitoryList = ref([]);
let markLength = ref(0); // 备注信息
const formState = reactive({
  dormitoryName: '' // 宿舍楼名称
});
// 添加宿舍组装数据
const formDormitoryState = ref({
  dormitoryId: null, // 所属宿舍楼ID
  name: null, // 所属宿舍楼名称
  totalStorey: '', // 楼层数
  genderAttribute: null, // 宿舍楼属性
  hostelId: '1', // 宿管id
  hostelName: null, // 宿管人员
  hostelPhone: '', // 宿管手机号
  remark: '', // 备注
  hostelList: [],
  dormitoryType: null // 楼属性 0 是学生宿舍楼  1 是 教师宿舍楼
});
// 记录是选择得新建学生宿舍楼还是选择得新建教师宿舍楼
const changeFloorType = reactive({
  type: -1 // 0 是 选择的新建学生宿舍楼 ------ 1 是 选择的新建教师宿舍楼
});
const columnsDormitory = reactive([
  {
    key: 'name',
    title: '宿舍楼',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    fixed: 'left'
  },
  {
    key: 'genderAttribute',
    title: '宿舍楼属性',
    dataIndex: 'genderAttribute',
    scopedSlots: { customRender: 'genderAttribute' }
  },
  {
    key: 'totalStorey',
    title: '楼层数',
    dataIndex: 'totalStorey',
    scopedSlots: { customRender: 'totalStorey' }
  },
  {
    key: 'totalRoom',
    title: '房间数',
    dataIndex: 'totalRoom',
    scopedSlots: { customRender: 'totalRoom' }
  },
  {
    key: 'airRoom',
    title: '空房数',
    dataIndex: 'airRoom',
    scopedSlots: { customRender: 'airRoom' }
  },
  {
    key: 'totalBed',
    title: '床位数',
    dataIndex: 'totalBed',
    scopedSlots: { customRender: 'totalBed' }
  },
  {
    key: 'airBed',
    title: '空床数',
    dataIndex: 'airBed',
    scopedSlots: { customRender: 'airBed' }
  },
  {
    key: 'peopleNumber',
    title: '入住人数',
    dataIndex: 'peopleNumber',
    scopedSlots: { customRender: 'peopleNumber' }
  },
  {
    key: 'hostelName',
    title: '管理员',
    dataIndex: 'hostelName',
    scopedSlots: { customRender: 'hostelName' }
  },
  {
    key: 'action',
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    fixed: 'right',
    width: 180
  }
]);
const loading = ref(true);
// 指定每页条数
const pageSizeOptions = ref(['10', '20', '30', '40', '50', '100', '500', '1000']);
// 获取宿舍楼列表
const getDormitoryPage = num => {
  let where = {
    size: tableData.value.size
  };
  where.current = num || tableData.value.current;
  getDormitoryPageList(where).then(res => {
    if (res.data.code === 200) {
      tableData.value = res.data.data;
      loading.value = false;
    }
  });
};

const onSubmit = () => {
  if (!formState.dormitoryName) {
    // message.error('请输入宿舍楼名称');
    getDormitoryPage(1);
    return false;
  }
  let where = {
    name: formState.dormitoryName
  };
  getDormitoryPageList(where).then(res => {
    if (res.data.code === 200) {
      tableData.value = res.data.data;
      loading.value = false;
    }
  });
};

// 已选宿管人员的所有信息
let hostelList = ref([]);

// 选择宿管人员确认按钮
const addDor = debounce(function (list) {
  console.log(list);
  deptName.value = [];
  selectUserList.value = JSON.parse(JSON.stringify(list));

  modalState.value = false;
  hostelList.value = list;
  formDormitoryState.value.hostelList = [];
  formDormitoryState.value.hostelPhone = '';
  formDormitoryState.value.hostelName = '';
  list.forEach(elem => {
    formDormitoryState.value.hostelPhone += elem.mobile + ',';
    formDormitoryState.value.hostelName += elem.realName + ',';
    formDormitoryState.value.hostelList.push({
      hostelId: elem.userId,
      hostelName: elem.realName,
      hostelPhone: elem.mobile
    });
  });
  // 去除最后一个逗号
  formDormitoryState.value.hostelPhone = formDormitoryState.value.hostelPhone.substring(
    0,
    formDormitoryState.value.hostelPhone.length - 1
  );
  formDormitoryState.value.hostelName = formDormitoryState.value.hostelName.substring(
    0,
    formDormitoryState.value.hostelName.length - 1
  );
}, 500);

// 获取所有宿舍楼列表
const getDormitory = () => {
  // let obj = {
  //   pid: 0
  //   // level: 0
  // };
  // listPlaceDormitory(obj).then(res => {
  //   if (res.data.code === 200) {
  //     dormitoryList.value = res.data.data;
  //   }
  //   console.log('dormitoryList', dormitoryList);
  // });
  listPlaceDormitoryTree().then(res => {
    if (res.data.code === 200) {
      dormitoryList.value = res.data.data;
    }
    console.log('dormitoryList', dormitoryList);
  });
};

const roomList = ref([]);
// 获取宿舍楼下级
const getDormitoryRoom = (item, level, index) => {
  console.log('item', item);
  let obj = {
    pid: item.id
    // level: item.treeLevel + 1
  };
  listPlaceDormitory(obj).then(res => {
    if (res.data.code === 200) {
      item.roomList = res.data.data;
    }
  });
};

// 表格数据
let tableData = ref({
  current: 1, // 当前页
  optimizeCountSql: true, // 是否有上一页
  orders: [], // 排序
  pages: 0, // 总页数
  records: [], // 数据
  searchCount: true, // 是否有下一页
  size: 10, // 当前条数
  total: 0 // 总条数
});
// 添加宿舍楼 弹框
const addDormitory = reactive({
  title: '添加宿舍楼',
  visible: false,
  width: '530px',
  iconType: 'default'
});

// 查看宿舍楼 弹框
const dormitoryInfo = reactive({
  title: '查看',
  visible: false,
  width: '530px',
  iconType: 'default'
});

// 获取宿舍详情 按钮
const onDormitoryDetails = value => {
  getDormitoryInfo(value.id).then(res => {
    if (res.data.code === 200) {
      formDormitoryState.value = res.data.data;
      markLength.value = formDormitoryState.value.remark.length;
      dormitoryInfo.visible = true;
      if (res.data.data.hostelList) {
        getHostelList(res.data.data.hostelList);
      }
    } else {
      message.error(res.data.msg);
    }
  });
};

// 宿舍楼id
const dorId = ref(null);
// 宿舍楼楼层
// const dormitoryStorey = ref(0);
// 添加宿舍楼弹窗按钮
const dormitoryAdd = () => {
  selectFloorType.visible = true;
  // addDormitory.visible = true;
  // addDormitory.title = '添加宿舍楼';
  // dorId.value = null;
  // selectDormitoryRoomValue.value = [];
};
// -------------------------------------------------------- 新增的逻辑 开始
// 选择宿舍楼类型 弹框 新加的
const selectFloorType = reactive({
  title: '宿舍楼模板',
  visible: false,
  width: '413px',
  iconType: 'default',
  bodyStyle: {
    padding: '24px'
  },
  wrapClassName: 'floor-type-new'
});

// const selectFloorType = reactive({
//   title: '宿舍楼模板',
//   visible: false,
//   width: '413px',
//   iconType: 'default',
//   bodyStyle: {
//     padding: '24px'
//   },
//   wrapClassName: 'floor-type-new'
// });
// 控制编辑的时候 是否能选择某一属性的宿舍楼
const floorTypeShowStatus = ref({
  male: true,
  female: true,
  blend: true
});
const floorTypeShowStatusStudent = ref({
  male: true,
  female: true,
  blend: true
});
// // 添加宿舍楼弹窗按钮 新加的 显示添加学生宿舍楼弹窗
// const addStudentFloor = () => {
//   // 变更 选择的 模式  0 是新建学生宿舍楼
//   changeFloorType.type = 0;
//   addDormitory.visible = true;
//   addDormitory.title = '添加宿舍楼';
//   dorId.value = null;
//   selectDormitoryRoomValue.value = [];
// };
// // 添加宿舍楼弹窗按钮 新加的 显示添加教师宿舍楼弹窗
// const addTeacherFloor = () => {
//   // 变更 选择的 模式  1 是新建教师宿舍楼
//   changeFloorType.type = 1;
//   addDormitoryTeacher.visible = true;
//   addDormitoryTeacher.title = '添加宿舍楼';
//   dorId.value = null;
//   selectDormitoryRoomValue.value = [];
//   teacherFloorType.male = true; // 男教职工楼属性
//   teacherFloorType.female = true; // 女教职工楼属性
//   teacherFloorType.blend = true; // 混合教职工楼属性
// };
// 添加宿舍楼 统一成一个方法
const addFloor = type => {
  // dormitoryType    0 学生          1是教师
  // genderAttribute  0 女生宿舍       1男生宿舍，2混合宿舍
  // genderAttribute  0 女教职工宿舍， 1男教职工宿舍，2混合教职工宿舍
  changeFloorType.type = type;
  formDormitoryState.value.dormitoryType = type;
  // 上边是新加的
  addDormitory.visible = true;
  addDormitory.title = '添加宿舍楼';
  dorId.value = null;
  selectDormitoryRoomValue.value = [];
  if (type === 1) {
    floorTypeShowStatus.value = {
      male: true,
      female: true,
      blend: true
    };
  } else {
    floorTypeShowStatusStudent.value = {
      male: true,
      female: true,
      blend: true
    };
  }
  // new jia
  selectFloorType.visible = false;
};
// 添加宿舍楼 弹框（教师）
const addDormitoryTeacher = reactive({
  title: '添加教职工宿舍楼',
  visible: false,
  width: '530px',
  iconType: 'default'
});
// 清空form表单 （添加教师宿舍楼点取消按钮）
const onCancelDormitoryTeacher = () => {
  formDormitoryState.value = {
    dormitoryId: null, // 所属宿舍楼ID
    name: null, // 所属宿舍楼名称
    totalStorey: '', // 楼层数
    genderAttribute: null, // 宿舍楼属性
    remark: '', // 备注
    hostelList: [],
    dormitoryType: null
  };
  selectUserList.value = [];
  addDormitoryTeacher.visible = false;
  addDormitory.visible = false;
};
// 添加宿舍楼 （添加教师宿舍楼点确定按钮）
const onCreateDormitoryTeacher = value => {
  if (verificationForm(1)) {
    if (!dorId.value) {
      let obj = {
        parentId: formDormitoryState.value.parentId,
        locationId: formDormitoryState.value.locationId,
        name: formDormitoryState.value.name,
        genderAttribute: formDormitoryState.value.genderAttribute,
        remark: formDormitoryState.value.remark,
        totalStorey: formDormitoryState.value.totalStorey,
        hostelList: formDormitoryState.value.hostelList,
        dormitoryType: formDormitoryState.value.dormitoryType
      };
      createDormitory(obj).then(res => {
        if (res.data.code === 200) {
          message.success(res.data.msg);
          onCancelDormitory();
          getDormitoryPage(1);
          selectFloorType.visible = false; // 隐藏选择宿舍楼弹窗
          addDormitoryTeacher.visible = false;
        } else {
          message.error(res.data.msg);
        }
      });
    } else {
      let obj = {
        parentId: formDormitoryState.value.parentId,
        locationId: formDormitoryState.value.locationId,
        name: formDormitoryState.value.name,
        genderAttribute: formDormitoryState.value.genderAttribute,
        remark: formDormitoryState.value.remark,
        totalStorey: formDormitoryState.value.totalStorey,
        hostelList: formDormitoryState.value.hostelList,
        id: dorId.value,
        dormitoryType: formDormitoryState.value.dormitoryType
      };
      updateDormitory(obj).then(res => {
        if (res.data.code === 200) {
          message.success(res.data.msg);
          onCancelDormitory();
          getDormitoryPage(1);
          selectFloorType.visible = false; // 隐藏选择宿舍楼弹窗
          addDormitoryTeacher.visible = false;
        } else {
          message.error(res.data.msg);
        }
      });
    }
  }
};
// -------------------------------------------------------- 新增的逻辑 结束
// 删除宿舍楼 弹窗 提示内容
const delText = ref('');
// 表格多选选项
const selectedRowKeys = ref([]);
// 表格多选回调
const onSelectChange = (rowKeys, rows) => {
  selectedRowKeys.value = rowKeys;
};
watch(selectedRowKeys, value => {
  if (value.length) {
    isDel.value = true;
  } else {
    isDel.value = false;
  }
});
// 是否选择删除房间
const isDel = ref(false);
// 删除宿舍楼 弹框
const delDormitory = reactive({
  title: '温馨提示',
  visible: false,
  width: '328px',
  iconType: 'default'
});

// 删除宿舍楼 方法
const onDelDormitory = () => {
  if (!selectedRowKeys.value.length) {
    message.warning('请选择房间');
    return;
  }
  delDormitory.visible = true;
  delDormitory.state = true;
  delText.value = '【删除宿舍楼】将会清除所选宿舍楼下所有房间信息且无法恢复，是否确认删除？';
};

// 删除宿舍楼列表
const onDelete = debounce(() => {
  btnLoading.value = true;
  if (delDormitory.state) {
    deleteDormitory(selectedRowKeys.value).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg);
        delDormitory.visible = false;
        selectedRowKeys.value.length = [];
        isDel.value = false;
        btnLoading.value = false;
        getDormitoryPage(1);
      } else {
        btnLoading.value = false;
        delText.value = '所选宿舍楼当前存在住宿信息，不可删除。';
        delDormitory.state = false;
      }
    });
  } else {
    btnLoading.value = false;
    delDormitory.visible = false;
  }
}, 500);

// 宿舍楼选项改变回调
const onChangeDormitory = value => {
  // formDormitoryState.value.totalStorey = null;
  // formDormitoryState.value.name = dormitoryList.value.filter(elem => elem.id === value)[0].name;
  showDormitory.value = false;
  nextTick(() => {
    showDormitory.value = true;
    addDormitory.visible = false;
  });
  bedchoiceForm.visible = true;
};

// 验证表单
const verificationForm = type => {
  // 添加学生宿舍楼 type 传进来 0
  // 添加教师宿舍楼 type 传进来 1
  if (!formDormitoryState.value.locationId) {
    message.error('请选择所属宿舍楼');
    return false;
  }
  if (!formDormitoryState.value.totalStorey) {
    message.error('请输入楼层数');
    return false;
  }
  if (
    formDormitoryState.value.genderAttribute === null ||
    formDormitoryState.value.genderAttribute === ''
  ) {
    message.error('请选择宿舍楼属性');
    return false;
  }
  if (!formDormitoryState.value.hostelName && formDormitoryState.value.dormitoryType === 0) {
    message.error('请选择宿管人员');
    return false;
  }
  // if (formDormitoryState.value.hostelPhone) {
  //   let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
  //   if (!reg.test(formDormitoryState.value.hostelPhone)) {
  //     message.error('宿管手机号格式有误');
  //     return false;
  //   }
  // }

  if (!formDormitoryState.value.hostelPhone && formDormitoryState.value.dormitoryType === 0) {
    message.error('请输入宿管手机号');
    return false;
  }
  return true;
};

// 添加宿舍楼
const onCreateDormitory = debounce(value => {
  btnLoading.value = true;
  if (verificationForm(0)) {
    if (!dorId.value) {
      let obj = {
        parentId: formDormitoryState.value.parentId,
        locationId: formDormitoryState.value.locationId,
        name: formDormitoryState.value.name,
        genderAttribute: formDormitoryState.value.genderAttribute,
        remark: formDormitoryState.value.remark,
        totalStorey: formDormitoryState.value.totalStorey,
        hostelList: formDormitoryState.value.hostelList,
        dormitoryType: formDormitoryState.value.dormitoryType
      };
      createDormitory(obj).then(res => {
        if (res.data.code === 200) {
          message.success(res.data.msg);
          onCancelDormitory();
          btnLoading.value = false;
          getDormitoryPage(1);
          selectFloorType.visible = false; // 隐藏选择宿舍楼弹窗
        } else {
          btnLoading.value = false;
          message.error(res.data.msg);
        }
      });
    } else {
      let obj = {
        parentId: formDormitoryState.value.parentId,
        locationId: formDormitoryState.value.locationId,
        name: formDormitoryState.value.name,
        genderAttribute: formDormitoryState.value.genderAttribute,
        remark: formDormitoryState.value.remark,
        totalStorey: formDormitoryState.value.totalStorey,
        hostelList: formDormitoryState.value.hostelList,
        id: dorId.value,
        dormitoryType: formDormitoryState.value.dormitoryType
      };
      updateDormitory(obj).then(res => {
        if (res.data.code === 200) {
          message.success(res.data.msg);
          onCancelDormitory();
          getDormitoryPage(1);
          btnLoading.value = false;
          selectFloorType.visible = false; // 隐藏选择宿舍楼弹窗
        } else {
          btnLoading.value = false;
          message.error(res.data.msg);
        }
      });
    }
  } else {
    btnLoading.value = false;
  }
}, 500);

// 清空form表单
const onCancelDormitory = () => {
  if (addDormitory.title !== '编辑宿舍楼') {
    // new jia
    selectFloorType.visible = true;
    btnLoading.value = false;
  }
  formDormitoryState.value = {
    dormitoryId: null, // 所属宿舍楼ID
    name: null, // 所属宿舍楼名称
    totalStorey: '', // 楼层数
    genderAttribute: null, // 宿舍楼属性
    hostelId: '1', // 宿管id
    hostelName: null, // 宿管人员
    hostelPhone: '', // 宿管手机号
    remark: '', // 备注
    hostelList: [],
    dormitoryType: null
  };
  selectUserList.value = [];
  btnLoading.value = false;
  addDormitory.visible = false;
};

// 查看
const onCancel = () => {
  formDormitoryState.value = {
    dormitoryId: null, // 所属宿舍楼ID
    name: null, // 所属宿舍楼名称
    totalStorey: '', // 楼层数
    genderAttribute: null, // 宿舍楼属性
    hostelId: '1', // 宿管id
    hostelName: null, // 宿管人员
    hostelPhone: '', // 宿管手机号
    remark: '', // 备注
    hostelList: [],
    dormitoryType: null
  };
  dormitoryInfo.visible = false;
};

// // label样式
// const labelCol = reactive({
//   xs: { span: 2 },
//   sm: { span: 4 }
// });
// const wrapperCol = reactive({
//   xs: { span: 24 },
//   sm: { span: 20 }
// });
// label样式
const labelCol = reactive({
  xs: { span: 10 },
  xl: { span: 8 },
  xxl: { span: 4 }
});
const wrapperCol = reactive({
  xs: { span: 24 },
  xl: { span: 24 },
  xxl: { span: 24 }
});
// 编辑 按钮
const onEditDeta = value => {
  getDormitoryInfo(value.id).then(res => {
    console.log('编辑宿舍楼', res.data.data);
    let json = res.data.data;
    if (res.data.code === 200) {
      formDormitoryState.value = res.data.data;
      formDormitoryState.value.fullPath = res.data.data.name;
      markLength.value = formDormitoryState.value.remark.length;
      addDormitory.visible = true;
      addDormitory.title = '编辑宿舍楼';
      dorId.value = value.id;

      if (res.data.data.hostelList) {
        res.data.data.hostelList.forEach(elem => {
          elem.userId = elem.hostelId;
        });
        selectUserList.value = res.data.data.hostelList;
        getHostelList(res.data.data.hostelList);
      }
      // floorTypeShowStatus.value.male   男
      // floorTypeShowStatus.value.female 女
      // floorTypeShowStatus.value.blend  混合
      // 教师
      if (json.dormitoryType === 1) {
        // 没分宿舍楼
        if (json.isAllocation === 0) {
          // 女教职工宿舍
          if (json.genderAttribute === 0) {
            floorTypeShowStatus.value = {
              male: false,
              female: true,
              blend: true
            };
          }
          // 男教职工宿舍
          if (json.genderAttribute === 1) {
            floorTypeShowStatus.value = {
              male: true,
              female: false,
              blend: true
            };
          }
          // 混合教职工宿舍
          if (json.genderAttribute === 2) {
            floorTypeShowStatus.value = {
              male: true,
              female: true,
              blend: true
            };
          }
        }
        // 分了宿舍楼
        if (json.isAllocation === 1) {
          // 0 全是女生的房间
          if (json.dormitoryAttributeType === 0) {
            floorTypeShowStatus.value = {
              male: false,
              female: true,
              blend: true
            };
          }
          // 1 全是男生的房间
          if (json.dormitoryAttributeType === 1) {
            floorTypeShowStatus.value = {
              male: true,
              female: false,
              blend: true
            };
          }
          // 2 有男有女的房间
          if (json.dormitoryAttributeType === 2) {
            floorTypeShowStatus.value = {
              male: false,
              female: false,
              blend: true
            };
          }
        }
      }
      // 学生
      if (json.dormitoryType === 0) {
        // 没分宿舍楼
        if (json.isAllocation === 0) {
          // 女楼
          if (json.genderAttribute === 0) {
            floorTypeShowStatusStudent.value = {
              male: false,
              female: true,
              blend: true
            };
          }
          // 男楼
          if (json.genderAttribute === 1) {
            floorTypeShowStatusStudent.value = {
              male: true,
              female: false,
              blend: true
            };
          }
          // 混合楼
          if (json.genderAttribute === 2) {
            floorTypeShowStatusStudent.value = {
              male: true,
              female: true,
              blend: true
            };
          }
        }
        // 分了宿舍楼
        if (json.isAllocation === 1) {
          // 0 全是女生的房间
          if (json.dormitoryAttributeType === 0) {
            floorTypeShowStatusStudent.value = {
              male: false,
              female: true,
              blend: true
            };
          }
          // 1 全是男生的房间
          if (json.dormitoryAttributeType === 1) {
            floorTypeShowStatusStudent.value = {
              male: true,
              female: false,
              blend: true
            };
          }
          // 2 有男有女的房间
          if (json.dormitoryAttributeType === 2) {
            floorTypeShowStatusStudent.value = {
              male: false,
              female: false,
              blend: true
            };
          }
        }
      }
    } else {
      message.error(res.data.msg);
    }
  });
};

function getHostelList(hList) {
  formDormitoryState.value.hostelList = [];
  formDormitoryState.value.hostelPhone = '';
  formDormitoryState.value.hostelName = '';
  hList.forEach(elem => {
    formDormitoryState.value.hostelPhone += elem.hostelPhone + ',';
    formDormitoryState.value.hostelName += elem.hostelName + ',';
    formDormitoryState.value.hostelList.push({
      hostelId: elem.hostelId,
      hostelName: elem.hostelName,
      hostelPhone: elem.hostelPhone
    });
  });
  // 去除最后一个逗号
  formDormitoryState.value.hostelPhone = formDormitoryState.value.hostelPhone.substring(
    0,
    formDormitoryState.value.hostelPhone.length - 1
  );
  formDormitoryState.value.hostelName = formDormitoryState.value.hostelName.substring(
    0,
    formDormitoryState.value.hostelName.length - 1
  );
}

// 备注信息
function onChangMark(e) {
  markLength.value = formDormitoryState.value.remark.length;
}
// 删除宿舍楼 弹窗 关闭
const handleCancelDel = () => {
  delDormitory.visible = false;
  // btnLoading.value = true;
};

const btnLoading = ref(false);
</script>
<style>
/* 修改宿舍楼模板弹窗样式 */

.floor-type-new .micro-dormitory-modal-title {
  font-size: 18px;
  font-weight: 500;
  color: #222222;
}
.floor-type-new .micro-dormitory-modal-header {
  border: none;
  padding-bottom: 0;
  padding-top: 24px;
}

.floor-type-new .micro-dormitory-modal-body {
  padding-top: 16px;
}
</style>
<style lang="less" scoped>
.add-room-dialog {
  li {
    display: flex;
    align-items: center;
    .add-room-dialog-label {
      width: 19%;
      text-align: right;
      .required-tips::before {
        content: '*';
        color: #ff0000;
      }
    }
    /deep/.micro-dormitory-select,
    /deep/.micro-dormitory-input {
      flex: 1;
    }
  }
  li + li {
    margin-top: 24px;
  }
}
.top,
.below {
  width: 100%;
  padding: 24px;
  background: #ffffff;
  border-radius: 4px;
}
.below {
  min-height: 805px;
  .search {
    display: flex;
    justify-content: space-between;
    .search-btn-left {
      width: 40%;
      display: flex;
      justify-content: flex-start;
      a-button {
        margin-left: 16px;
      }
    }
    .search-btn-right {
      width: 40%;
      display: flex;
      justify-content: flex-end;
    }
  }
  /deep/.micro-dormitory-empty-normal .micro-dormitory-empty-image {
    height: 100px;
  }
  /deep/.micro-dormitory-empty-img-simple {
    width: 100px;
    height: 80px;
  }
}
.top {
  margin-bottom: 24px;
  .search {
    display: flex;
    justify-content: flex-end;
  }
}
.pagination {
  align-items: center;
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
.checkOutStyle {
  width: 280px;
  //   height: 48px;
  background: #f8f8f8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 14px;
  img {
    margin-right: 8px;
  }
}
.checkOutStyleBottom {
  margin-bottom: 16px;
}
.checkOutStyleNew {
  width: 100%;
  box-sizing: border-box;
  padding: 32px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  cursor: pointer;
  .checkOutStyleNewChild {
    display: flex;
    align-items: center;
  }
  .studentFloorLeftIcon {
    width: 40px;
    height: 40px;
  }
  .studentFloorLeftText {
    font-size: 16px;
    font-weight: 400;
    color: #222222;
  }
}
.checkOutStyleNewStudent {
  background: rgba(86, 214, 183, 0.1);
}
.checkOutStyleNewTeacher {
  background: rgba(254, 143, 143, 0.1);
}
.checkOut-notes {
  padding: 14px;
  font-size: 12px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  color: #999999;
}
.remarks {
  // border: 1px solid #dedede;
  border-radius: 4px;
  position: relative;
  // height: 120px;
  .font-data {
    position: absolute;
    color: #848c94;
    // text-align: right;
    right: 10px;
    bottom: 6px;
  }
}

.hostelName {
  display: inline-block;
  white-space: nowrap;
  width: 170px;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/deep/.micro-dormitory-radio-wrapper {
  padding: 0 0 0 10px;
}
</style>
